<template>
  <div>
    <HeaderIndex title="商品详情" :showTwo="false" />
    <van-swipe @change="onChange" :autoplay="3000">
      <van-swipe-item v-for="(v, i) in detailArr.titleImages" :key="i">
        <img :src="v" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/
          {{ detailArr.titleImages.length }}
        </div>
      </template>
    </van-swipe>
    <main class="one">
      <p class="banner-bottom1">
        ￥{{ info.price }}
        <del>原价698</del>
      </p>
      <p class="banner-bottom2">
        {{ info.title }}
      </p>
      <div class="legal">正版授权</div>
    </main>
    <main class="two">
      <van-tabs v-model="active" scrollspy sticky>
        <van-tab title="商品详情">
          <div class="del">
            <p class="detail-1">套餐详情</p>
            <p class="detail-2">
              {{ info.title }}
              <span class="detail-2-2">￥698</span>
              <span class="detail-2-1">{{ info.price }}元</span>
            </p>
            <p class="detail-3">
              <b>品牌</b>
              ：阴阳师大天狗粘土手办
            </p>
            <p class="detail-3">
              <b>产地</b>
              ：广州
            </p>
            <img class="xq" v-for="(v, i) in detailArr.detailImages" :key="i" :src="v" alt="" />
          </div>
        </van-tab>
        <van-tab title="购买须知">
          <div class="must">
            <div class="must-item">
              <p>售后须知</p>
              <p>
                啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
            <div class="must-item">
              <p>售后须知</p>
              <p>
                啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
            <div class="must-item">
              <p>售后须知</p>
              <p>
                啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
            <div class="must-item">
              <p>售后须知</p>
              <p>
                啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
            <div class="must-item">
              <p>售后须知</p>
              <p>
                啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
            <div class="must-item">
              <p>售后须知</p>
              <p>
                啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
          </div>
        </van-tab>
        <van-tab title="相关推荐">
          推荐推荐啊啊啊
        </van-tab>
      </van-tabs>
    </main>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
    </van-goods-action>
  </div>
</template>

<script>
import getLink from '@/api/getLink.js';
import getdata from '@/api/getdata.js';
export default {
  data() {
    return {
      active: 'a',
      detailArr: {
        titleImages: [],
        detailImages: [],
      },
      current: 0,
      info: {
        img: '',
        title: '',
        price: '',
      },
    };
  },
  created() {
    if (this.$route.query.id) {
      getdata('/apidl/store/detail', { id: this.$route.query.id }).then(ok => {
        this.detailArr.titleImages = ok.data.titleImages;
        this.detailArr.detailImages = ok.data.detailImages;
        this.info.title = ok.data.title;
        this.info.price = ok.data.price;
        this.info.img = ok.data.titleImages[0];
      });
    } else {
      getLink('/api/store/detail').then(ok => {
        this.detailArr = ok.data;
        this.detailArr.titleImages.unshift(this.info.img);
      });
      this.info.title = this.$route.query.name;
      this.info.price = this.$route.query.price;
      this.info.img = this.$route.query.img;
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    onClickButton() {
      this.$router.push({ name: 'storeSubmit', query: this.info });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.van-swipe-item {
  width: 100%;
  height: 7rem;
  img {
    width: 100%;
    height: 7rem;
  }
}
.one {
  width: 100%;
  background-color: white;
  padding: 0.2rem;
  box-sizing: border-box;
  .banner-bottom1 {
    font-size: 0.5rem;
    color: red;
    del {
      color: #999;
      font-size: 0.3rem;
      margin-left: 0.1rem;
    }
  }
  .banner-bottom2 {
    margin: 0.1rem 0;
    font-size: 0.35rem;
  }
  .legal {
    padding: 0.1rem;
    background-color: #fee0cc;
    color: orange;
    border-radius: 0.1rem;
    font-size: 0.2rem;
    display: inline-block;
  }
}
.two {
  margin-top: 0.2rem;
  background-color: white;
  box-sizing: border-box;
  padding: 0.2rem;
  margin-bottom: 50px;
  .del {
    .detail-1 {
      padding: 0.23rem;
      font-size: 0.3rem;
      color: black;
      border-top: 1px solid #eee;
    }
    .detail-2 {
      padding: 0.2rem;
      font-size: 0.26rem;
      color: #999;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      span {
        float: right;
        width: 1rem;
      }
    }
    .detail-3 {
      color: #999;
      margin: 0.2rem 0;
      font-size: 0.25rem;
      b {
        color: black;
      }
    }
    .xq {
      width: 100%;
    }
  }
  .must {
    margin: 0 0.2rem;
    box-sizing: border-box;
    padding: 0.3rem 0;
    border-top: 1px solid #eee;
    .must-item {
      p {
        font-size: 0.25rem;
        color: #999;
        margin: 0.25rem 0;
        &:first-of-type {
          color: black;
        }
      }
    }
  }
}
.custom-indicator {
  width: 0.6rem;
  line-height: 0.3rem;
  height: 0.3rem;
  text-align: center;
  border-radius: 0.1rem;
}
</style>
